<script setup lang="ts">
// -- imports
import {ref} from 'vue';
import AppHeader from '@/components/@lgs/AppHeader/AppHeader.vue';
import Tools from '@likg/tools';
import {useRoute} from 'vue-router';
import {api} from '@/api/apiServer';
import {aes_encrypt} from "@/utils/aes_endecrypt";

const route = useRoute();
// -- constants
const env = ref(Tools.getEnv());

// 获取订单详情数据
const orderInfo = ref<any>({});
const getOrderInfo = async () => {
    let res = await api.getOrderDetail({
        orderId: orderId.value,
    });
    if (res.code === 200) {
        orderInfo.value = res.data;
    }
};

// 获取url参数
const orderId = ref(route.query?.orderId);
if (orderId.value) {
    // 获取订单详情数据
    getOrderInfo();
}
// 跳转
const linkFn = (item:any) => {
    //路径拼接加密
    const param = {
        "phoneNumber":item.phoneNumber,
        "orderId":item.orderId,
        "outTradeNo":item.outTradeNo,
    }
    const newStr = aes_encrypt(JSON.stringify(param));
    window.location.href = item.orderDetailView?.concat('?param=').concat(encodeURIComponent(newStr));
}

</script>

<template>
    <div class="page ">
        <app-header v-if="env !== 'weixin'" title="使用详情" :show-status-bar="false"/>
        <div class="">
            <div class="mt-38 mb-15 f15 px-12 f-500">
                订单号：{{ orderInfo.orderId }}
            </div>
            <div class="bg-FFFFFF px-12 py-16 f14 ">
                <div class="flex-h-between mb-17">
                    <span class="color-222222">订单总金额：</span>
                    <span class="f-500">¥ {{ orderInfo.orderAmount }}</span>
                </div>

                <div class="flex-h-between mb-17">
                    <span class="color-222222">使用能量：</span>
                    <span class="color-primary">{{ orderInfo.integralNumber }} J</span>
                </div>
                <div class="flex-h-between  mb-17">
                    <span class="color-222222">实付金额：</span>
                    <span class="color-primary">¥{{ orderInfo.realAmount }}</span>
                </div>

                <div class="flex-h-between">
                    <span class="color-222222">购买日期：</span>
                    <span class="color-gary">{{ orderInfo.createTime }}</span>
                </div>

            </div>
            <div class="text-center mt-20 f14" v-if="orderInfo.orderDetailView" style="color: #20A5FE;"
                 @click="linkFn(orderInfo)">查看订单详情
            </div>
        </div>
    </div>
</template>

<style lang="less" scoped>

</style>
